<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store,no-cache"> 
    <meta name="Handheldfriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/att.css">
    <link rel="stylesheet" type="text/css" href="css/rztp.css">
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <script src="js/common.js"></script>
	<title>护照</title>
</head>
<body style="background-color: #fff;">
	<div class="hitop">
		<li class="tubiao"><img src="images/img/3211.png" alt=""></li>
		<form  action="" method = 'post'>
			 <table  class="bdhit" width="100%"  border="0" >
              <tr>
                <td><li class="lione"><a href="Id-card-certification.html">身份证</a>/<a href="security-card.html">社保卡</a>/<a href="hzhao-card.html" style="color:#000;">护照</a>/<a href="jiashizheng-card.html">驾驶证</a></li></td>
              </tr>
              <tr>
                <td>
                    <div class="bigk">
                      <div class="kuang">
                        <div class="addbox">
                            <input type="file" name="" class="fileinput">
                        </div>
                        <div class="on">
                          <div class="xian"></div>
                          <div class="chahao"></div>
                        </div>
                        <p>请点击上传护照照片</p>
                      </div>
                    </div>
                </td>
              </tr>
            </table>
              <li class="quetwo"><input type="submit" name="" id="" value="立即认证" class="oktwo"></li>
		</form>
	</div>
  <script>
 // 单张上传照片  删除照片
 $(" .fileinput").change(function () {
      var file = this.files[0];
      readFile(file,$(this).parent().siblings(".on"));
 });
 $(".on").mouseover(function () {
      $(this).children(".xian").show();
      $(this).children(".chahao").show();
 
 });
 $(".on").mouseleave(function () {
      $(this).children(".xian").hide();
      $(this).children(".chahao").hide();
 });
 $(".chahao").click(function () {
      $(this).next().remove();
      $(".xian").hide();
      $(".chahao").hide();
      $(this).parent().hide();
      $(this).parent().siblings(".addhao").show();
      $(this).parent().siblings(".addhao").children().val("");
 
 });
 var on =document.querySelector(".on");
 //    需要把阅读的文件传进来file element是把读取到的内容放入的容器
 function readFile(file,element) {
 //        新建阅读器
 var reader = new FileReader();
 //        根据文件类型选择阅读方式
 switch (file.type){
 case 'image/jpg':
 case 'image/png':
 case 'image/jpeg':
 case 'image/gif':
 reader.readAsDataURL(file);
 break;
 }
 //        当文件阅读结束后执行的方法
 reader.addEventListener('load',function () {
 //         如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
 switch (file.type){
     case 'image/jpg':
     case 'image/png':
     case 'image/jpeg':
     case 'image/gif':
     var img = document.createElement('img');
     img.src = reader.result;
     element.append(img);
     element.siblings(".addhao").hide();
     element.show();
     break;
    }
   });
 }
 // 批量上传部分
 var piliang = document.querySelector('#piliang');
 var on = $(".on");
 piliang.addEventListener('change',function () {
 for (var i = 0;i < this.files.length;i++){
 var file = this.files[i];
 on.eq(i).children(".chahao").next().remove();
 readFile(file,on.eq(i));
 }
 });
 //
 var on = $(".on");
 $(".next").click(function () {
    for (var i = 0; i < 10; i++) {
    console.log(on[i].childNodes.length);
    if (on[i].childNodes.length==6){
 //这个判断就是说明里面有多少个孩子，孩子不够数，不会生成相册
       }else{
           alert("上传照片不足3张");
           $(".next").attr("href","javascript:void(0)");
            return
            }
      $(".next").attr("href","生成相册.html");
    }
 });
 </script>
</body>
</html>